<template>
    <el-dialog
      title="审核发票"
      :visible="isShowInvoiceInfo"
      width="50%"
      @close="dialogClose"
    >

    <el-table
      ref="invoiceTable"
      :data="tableData"
      style="width: 100%; margin-bottom: 5%"
      border
      stripe
      highlight-current-row
      @row-click="handleRowClick"
      @select-all="handleCheckedAllAndCheckedNone"
      @select="handleCheckedAllAndCheckedNone"
    >
      <el-table-column property="invoiceTitle" label="发票抬头">
      </el-table-column>
      <el-table-column property="id" label="纳税人识别号" width="120">
      </el-table-column>
      <el-table-column property="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column property="email" label="电子邮箱">
      </el-table-column>
      <el-table-column property="companyAddress" label="注册公司地址" width="120">
      </el-table-column>
      <el-table-column property="openingBank" label="开户行">
      </el-table-column>
      <el-table-column property="bankAccount" label="银行账户">
      </el-table-column>
      <el-table-column property="companyPhone" label="注册公司电话" width="120">
      </el-table-column>
      <el-table-column property="addresseeName" label="收件人姓名" width="120">
      </el-table-column>
      <el-table-column property="addresseeAddress" label="收件人地址" width="120">
      </el-table-column>
      <el-table-column property="addresseePostCode" label="收件人邮编" width="120">
      </el-table-column>
      <el-table-column property="certificate" label="一般纳税人证明" width="120">
      </el-table-column>

    </el-table>

    <el-form :model="ruleForm" :rules="rules" ref="invoiceInfo" label-width="100px">
  
      <el-row :gutter="24">
          <el-col :span="12">
              <el-form-item label="保证金" prop="earnestMoney">
                  <el-input v-model="ruleForm.earnestMoney"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="手续费" prop="serviceCharge">
                  <el-input v-model="ruleForm.serviceCharge"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
  
      <el-row :gutter="24">
          <el-col :span="12">
              <el-form-item label="软件使用费" prop="royalty">
                  <el-input v-model="ruleForm.royalty"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="10">
              <el-form-item label="尾款" prop="finalPayment">
                  <el-input v-model="ruleForm.finalPayment"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
  
      <el-row :gutter="24">
          <el-col :span="22">
              <el-form-item label="备注" prop="remark">
                  <el-input type="textarea" v-model="ruleForm.remark"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
  
    </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">驳回请求</el-button>
        <el-button type="primary" @click="submitData()">生成发票</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script>
  export default {
      data(){
          return{
              tableData:[
                {
                    invoiceTitle: '123',
                    id: '456',
                    phone: '10022224444',
                    email: '123456789@qq.com',
                    companyAddress: '沈阳市开发区XX写字楼5层',
                    openingBank: '中国农业银行',
                    bankAccount: '1234567890987654321',
                    companyPhone: '13344447777',
                    addresseeName: 'XXX',
                    addresseeAddress: '沈阳市开发区XX写字楼5层',
                    addresseePostCode: '111111',
                    certificate: 'xxx'
                },
              ],
              ruleForm: {
                  earnestMoney: '',
                  serviceCharge: '',
                  royalty: '',
                  finalPayment: '',
                  remark: ''
              },
              rules:{
                  earnestMoney:[
                      {required: true, message: '请输入'}
                  ],
                  serviceCharge:[
                      {required: true, message: '请输入'}
                  ],
                  royalty:[
                      {required: true, message: '请输入'}
                  ],
                  finalPayment:[
                      {required: true, message: '请输入'}
                  ],
                  remark:[
                      {required: false}
                  ],
              }
          }
      },
      props: {
          isShowInvoiceInfo: {
              type: Boolean,
          },
      },
      methods: {
          dialogClose() {
              this.$emit("dialogClose");
          },
          submitData(){
              this.$refs.invoiceInfo.validate((valid) => {
                  if (!valid) {
                      return ;
                  }
                  else {
                      this.$emit('dialogClose');
                  }
              });
            },
      },
  };
  </script>
  
  <style>
  
  </style>